<template>
  <div class="my_screen_page ren_min_yin_hang">

    <my-header title="中国人民银行广西壮族自治区分行" />

    <div class="mt20 pl20 pr20 df jcsb">

      <!-- 左边 -->
      <div class="w760">
        <div class="area_block_1">

          <!-- 存贷款情况 -->
          <div>

            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">存贷款情况</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>

            <div class="yin_chart_size_1">
              <chart-bar-or-line-one :chartData="lineData1"></chart-bar-or-line-one>
            </div>

          </div>

          <!-- 重点领域信贷情况 -->
          <div class="mt40">

            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">重点领域信贷情况</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>

            <div class="scroll_box_1">
              <ul class="table_data_list">
                <vue3-seamless-scroll :list="list1" :hover="true" :step="0.2">
                  <li class="item_data_box" v-for="(item, index) in list1" :key="item.id">
                    <div class="param_box_flex flex_box aic">
                      <div class="item ov">
                        <div class="fwb clamp_1">{{ item.name }}</div>
                      </div>
                      <div class="w232"><span class="fz24 fwb text_font_DIN">{{ item.value }}</span><span
                          class="fz14 cor_777">{{ item.unit }}</span></div>
                      <div class="w80 tar"><span class="fz24 fwb cor_00F text_font_DIN">{{ item.percent }}</span></div>
                    </div>
                  </li>
                </vue3-seamless-scroll>
              </ul>
            </div>

          </div>

          <!-- 企业贷款加权利率 -->
          <div class="mt40">

            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">企业贷款加权利率</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>

            <div class="mt20 yin_chart_size_2">
              <chart-line-one :chartData="lineData2"></chart-line-one> 
            </div>

          </div>

        </div>
      </div>

      <!-- 中间 -->
      <div class="w960">

        <div class="yin_area_block_1">
          <ul class="loan_list_box">
            <li class="item_loan_box">
              <div class="fz20 lh24 tac">本外币各项存款</div>
              <div class="line_hor_1"></div>
              <div class="mt32 df aic jcc">
                <div class="yin_box_1">余额</div>
                <div class="ml25"><span class="fz40 cor_FF9 text_font_DIN">44067</span><span
                    class="ml5 fz16 cor_fff">亿元</span></div>
              </div>
              <div class="mt32 df aic jcc">
                <div><span class="fz16">增量：</span><span class="ml5 fz32 cor_FF9 text_font_DIN">44067</span><span
                    class="ml5 fz16 cor_fff">亿元</span></div>
                <div class="ml30"><span class="fz16">增速：</span><span class="ml5 fz32 cor_FF9 text_font_DIN">9.6%</span>
                </div>
              </div>
            </li>
            <li class="item_loan_box">
              <div class="fz20 lh24 tac">本外币各项存款</div>
              <div class="line_hor_1"></div>
              <div class="mt32 df aic jcc">
                <div class="yin_box_1">余额</div>
                <div class="ml25"><span class="fz40 cor_FF9 text_font_DIN">44067</span><span
                    class="ml5 fz16 cor_fff">亿元</span></div>
              </div>
              <div class="mt32 df aic jcc">
                <div><span class="fz16">增量：</span><span class="ml5 fz32 cor_FF9 text_font_DIN">44067</span><span
                    class="ml5 fz16 cor_fff">亿元</span></div>
                <div class="ml30"><span class="fz16">增速：</span><span class="ml5 fz32 cor_FF9 text_font_DIN">9.6%</span>
                </div>
              </div>
            </li>
          </ul>
        </div>

        <div class="mt24 yin_area_block_2">
          <img src="@/assets/images/dataCenter/map_1.png" class="" style="width: 100%;" alt="" />
          <!-- <div class="chart_map_size"></div> -->
        </div>

      </div>

      <!-- 右边 -->
      <div class="w760">
        <div class="area_block_1">

          <!-- 社会融资规模 -->
          <div>

            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">社会融资规模</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>

            <div class="mt20 yin_chart_size_3">
              <chart-bar-one :chartData="lineData3"></chart-bar-one>
            </div>

          </div>

          <!-- 当年累计新增同比增速 -->
          <div class="mt40">

            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">当年累计新增同比增速</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>

            <div class="mt20 yin_chart_size_3">
              <chart-bar-two :chartData="lineData4"></chart-bar-two>
            </div>

          </div>

        </div>
      </div>

    </div>

  </div>
</template>

<script setup>

import { reactive } from 'vue';
import MyHeader from '@/components/my-header.vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import chartBarOrLineOne from '@/components/renminyinhang/chartBarOrLineOne.vue';
import chartLineOne from '@/components/renminyinhang/chartLineOne.vue';
import chartBarOne from '@/components/renminyinhang/chartBarOne.vue';

const list1 = reactive([
  { id: 1, name: '工业用电量', value: '894.47', unit: '亿千瓦时', percent: '4.01%' },
  { id: 2, name: '工业用电量', value: '768.59', unit: '亿千瓦时', percent: '5.26%' },
  { id: 3, name: '工业用电量', value: '894.47', unit: '亿千瓦时', percent: '4.01%' },
  { id: 4, name: '工业用电量', value: '894.47', unit: '亿千瓦时', percent: '4.01%' },
  { id: 5, name: '工业用电量', value: '894.47', unit: '亿千瓦时', percent: '4.01%' },
  { id: 6, name: '工业用电量', value: '894.47', unit: '亿千瓦时', percent: '4.01%' }
]);

const lineData1 = reactive({
  datas:[
    [30000,36000,40000,34000,25000,51000,76000],
    [20000,24000,30000,28000,18000,40000,60000],
    [5, 4, 6, 3, 6, 10, 12],
    [3, 2, 4, 5, 13, 6, 8]
  ],
  dataX: ['2024年01月', '2024年02月', '2024年03月', '2024年04月', '2024年05月', '2024年06月', '2024年07月']
});

const lineData2 = reactive({
  datas: [3, 2, 4, 5, 13, 6, 8],
  dataX: ['2024年01月', '2024年02月', '2024年03月', '2024年04月', '2024年05月', '2024年06月', '2024年07月']
});

const lineData3 = reactive({
  datas: [1200, 850, 550, 780, 650, 920, 720],
  dataX: ['1月末', '2月末', '3月末', '4月末', '5月末', '6月末', '7月末']
});

const lineData4 = reactive({
  datas: [
    [1200, 850, 550, 780, 650, 920, 720],
    [900, 650, 850, 680, 350, 620, 520]
  ],
  dataX: ['1月末', '2月末', '3月末', '4月末', '5月末', '6月末', '7月末']
});

</script>

<style lang="scss" scoped>

.ren_min_yin_hang {
  .yin_area_block_1 {
    position: relative;
    padding: 40px 40px 0;
    width: 100%;
    height: 374px;
    background: url(@/assets/images/dataCenter/yin_area_1.png) no-repeat;
    background-size: 100%;
  }
  .yin_area_block_2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    width: 100%;
    height: 1088px;
    background: url(@/assets/images/dataCenter/yin_area_2.png) no-repeat;
    background-size: 100%;
    .chart_map_size {
      position: relative;
      width: 100%;
      height: 880px;
    }
  }

  .yin_chart_size_1 {
    position: relative;
    width: 100%;
    height: 369px;
  }

  .yin_chart_size_2 {
    position: relative;
    width: 100%;
    height: 450px;
  }

  .yin_chart_size_3 {
    position: relative;
    width: 100%;
    height: 632px;
  }

  .scroll_box_1 {
    position: relative;
    height: 380px;
    overflow: hidden;
    margin-top: 24px;
  }

  .table_data_list {
    position: relative;
    .item_data_box {
      position: relative;
      padding: 0 16px;
      height: 68px;
      background: rgba(2,20,37,0.9);
      box-shadow: inset 0px 0px 8px 0px rgba(43,141,191,0.6);
      border-radius: 8px;
      margin-bottom: 10px;
      .param_box_flex {
        position: relative;
        height: 100%;
        font-size: 16px;
        color: #fff;
      }
    }
  }

  .loan_list_box {
    position: relative;
    display: flex;
    justify-content: space-between;
    .item_loan_box {
      position: relative;
      padding: 32px 20px 20px;
      width: 420px;
      height: 294px;
      font-size: 16px;
      color: #fff;
      background: rgba(2,20,37,0.9);
      box-shadow: inset 0px 0px 8px 0px rgba(43,141,191,0.6);
      border-radius: 8px;
      .line_hor_1 {
        position: relative;
        height: 2px;
        background: linear-gradient( 90deg, rgba(60,177,246,0) 0%, #3CB1F6 50%, rgba(60,177,246,0) 100%);
        margin-top: 32px;
      }
      .yin_box_1 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        font-size: 20px;
        color: #00F0F7;
        font-weight: bold;
        background: url('@/assets/images/dataCenter/icon_02.png') no-repeat;
        background-size: 72px;
      }
    }
  }

}

</style>